<template>
  <div class="mydata">
    <mt-field class="border-bottom" v-if="type==='trueName'" label="真实姓名" placeholder="输入真实姓名" v-model="list.trueName"></mt-field>
    <mt-field class="border-bottom" v-if="type==='nickName'" label="昵称" placeholder="输入昵称" v-model="list.nickName"></mt-field>
    <mt-field class="border-bottom" v-if="type==='birthday'" type="date" label="生日" placeholder="输入生日" v-model="list.birthday"></mt-field>
    <mt-field class="border-bottom" v-if="type==='occupation'" label="职业" placeholder="输入职业" v-model="list.occupation"></mt-field>
    <mt-field class="border-bottom" v-if="type==='wechat'" label="微信" placeholder="输入微信" v-model="list.wechat"></mt-field>
    <mt-field class="border-bottom" v-if="type==='qq'" label="QQ" placeholder="输入QQ" v-model="list.qq"></mt-field>
    <div v-if="type==='img'" class="spBottom">
      <img class="isImg" :src="list.img" alt="">
      <uploader @getFiles="getImageList($event,'img')" :numLength="1"></uploader>
    </div>
    <div v-if="type==='wxImg'" class="spBottom">
      <img class="isImg" :src="list.wxImg" alt="">
      <uploader @getFiles="getImageList($event,'wxImg')" :numLength="1"></uploader>
    </div>
    <mt-radio
      v-if="type==='sex'"
      title="性别"
      align="right"
      v-model="list.sex"
      :options="['男', '女']">
    </mt-radio>
    <mt-field v-if="type==='pwd'" label="密码" placeholder="输入密码" type="password" v-model="password"></mt-field>
    <mt-field v-if="type==='pwd'" label="重复密码" placeholder="重复输入密码" type="password" v-model="rePassword"></mt-field>
    <div class="text-center">
      <mt-button type="danger" @click="handleClickBtn">提交</mt-button>
    </div>

  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
import uploader from '../public/Upload'

export default {
  name: 'MyDataItem',
  data () {
    return {
      type: '',
      password: '',
      rePassword: '',
      list: []
    }
  },
  components: {
    uploader
  },
  methods: {
    getInfo () {
      if (this.$route.query.type) {
        // console.log(this.$route.query.type)
        this.type = this.$route.query.type
      }
      axios.get('/meimai/interface/member/getProfileData', {
        params: {
          memberId: this.$store.state.userId
        }
      }).then((res) => {
        let datas = res.data
        if (datas.code === 0) {
          // console.log(datas)
          // console.log(this.$store.state.token)
          this.list = datas.data
        }
      })
    },
    handleClickBtn () {
      if (this.type === 'pwd') {
        if (this.password) {
          if (this.password !== this.rePassword) {
            Toast('两次密码不一致')
            return false
          }
          var params = new URLSearchParams()
          params.append('memberId', this.$store.state.userId)
          params.append('newPassword', this.password)
          axios.post('/meimai/interface/member/changePassword', params).then((res) => {
            let datas = res.data
            // console.log(datas)
            if (datas.code === 0) {
              Toast('修改成功')
              this.$router.push('/user-mydata')
            }
          })
        } else {
          Toast('新密码不能为空')
          return false
        }
      } else {
        var paramsPost = new URLSearchParams()
        paramsPost.append('memberId', this.$store.state.userId)
        if (this.type === 'nickName' && this.list.nickName) {
          paramsPost.append('nickName', this.list.nickName)
        } else if (this.type === 'trueName' && this.list.trueName) {
          paramsPost.append('trueName', this.list.trueName)
        } else if (this.type === 'sex' && this.list.sex) {
          paramsPost.append('sex', this.list.sex)
        } else if (this.type === 'birthday' && this.list.birthday) {
          paramsPost.append('birthday', this.list.birthday)
        } else if (this.type === 'occupation' && this.list.occupation) {
          paramsPost.append('occupation', this.list.occupation)
        } else if (this.type === 'wechat' && this.list.wechat) {
          paramsPost.append('wechat', this.list.wechat)
        } else if (this.type === 'qq' && this.list.qq) {
          paramsPost.append('qq', this.list.qq)
        } else if (this.type === 'wxImg' && this.list.wxImg) {
          paramsPost.append('wxImg', this.list.wxImg)
        } else if (this.type === 'img' && this.list.img) {
          paramsPost.append('img', this.list.img)
        } else {
          Toast('数据不存在')
          return false
        }
        this.changeInfo(paramsPost)
      }
    },
    changeInfo (params) {
      axios.post('/meimai/interface/member/changeInfo', params).then((res) => {
        let datas = res.data
        if (datas.code === 0) {
          Toast('修改成功')
          this.$router.push('/user-mydata')
        }
      })
    },
    getImageList (files, typeimg) {
      this.$nextTick(() => {
        // alert(JSON.stringify(files))
        for (let i = 0, len = files.length; i < len; i++) {
          // console.log(files)
          if (typeimg === 'img') {
            this.list.img = files[i].src
          }
          if (typeimg === 'wxImg') {
            this.list.wxImg = files[i].src
          }
          // this.imgList.push(files[i].src)
          // this.imgList.push(files[i].src.split('base64,')[1])
          // 上传图片
          //   this._getFileCode({
          //     Base64Str: files[i].src.split("base64,")[1],
          //     AttachmentType: this.$enums.AttachmentType.Activity
          //   });
        }
      })
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.mydata >>> .mint-button--danger
  text-align: center
  width: 80%
  padding: 10px
  margin-top: .3rem
.mydata >>> .thumbnails .thumbnail
  margin-left: 33%;
.text-center
  text-align: center
.mydata
  position: absolute
  width: 100%
  top: 0
  bottom: 0
  background-color: #f8f8f8
  .mydata-img
    width: .8rem
    height: .8rem
    border-radius: 50%
  .mydata-btn
    width: 80%
    text-align: center
    margin-top: .3rem
    display: inline-block
.spBottom
  width: 100%
  display: flex
  justify-content: space-around
  padding-bottom: .3rem
  background: #fff
  .isImg
    position: absolute
    margin-left: 33%;
    margin: 10px 0 10px 4px
    padding-right: 5px
    width: 33%
    box-sizing: border-box
    height: 110px
    opacity: .4

</style>
